<template>
  <div v-if="InventoryStore.IsCover.BsAudit">
    <el-dialog
      class="dialog"
      :show-close="false"
      :title="title"
      width="1000px"
      align-center
      v-model="InventoryStore.IsCover.BsAudit"
    >
      <div class="goodsInfo info">
        <p>商品信息</p>
        <p>
          <span>商品编号：{{InventoryStore.infoArr.goodsInfo.goodsid?InventoryStore.infoArr.goodsInfo.goodsid:''}}</span>
          <span>商品名称:{{InventoryStore.infoArr.goodsInfo.note?InventoryStore.infoArr.goodsInfo.note:''}}</span>
        </p>
        <p>
          <span>规格：{{InventoryStore.infoArr.goodsInfo.norms?InventoryStore.infoArr.goodsInfo.norms:''}}</span>
          <span>价格（币）：{{InventoryStore.infoArr.goodsInfo.gprice?InventoryStore.infoArr.goodsInfo.gprice:''}}</span>
          <span>库存：{{InventoryStore.infoArr.goodsInfo.storecount?InventoryStore.infoArr.goodsInfo.storecount:''}}</span>
        </p>
      </div>
      <div class="Reporting info">
        <p>报损</p>
        <p>
          <span>报损数量:{{InventoryStore.infoArr.goodsFrmlossInfo.num?InventoryStore.infoArr.goodsFrmlossInfo.num:''}}</span>
          <span>
            损坏原因：
            {{InventoryStore.infoArr.goodsFrmlossInfo.frmlosscau?InventoryStore.infoArr.goodsFrmlossInfo.frmlosscau:''}}
          </span>
        </p>
        <p>
          损坏描述：
          {{InventoryStore.infoArr.goodsFrmlossInfo.frmlossdes?InventoryStore.infoArr.goodsFrmlossInfo.frmlossdes:''}}
        </p>
        <div class="pic">
          损坏图片：
          <span
            v-for="item in InventoryStore.infoArr.photos?InventoryStore.infoArr.photos:''"
            :key="item"
          >
            <img class="ReportingImg" :src="item" alt />
          </span>
        </div>
      </div>
      <div class="audit info">
        <p>{{AllInfo.audit.title}}</p>
        <el-table height="150" :data="AllInfo.audit.info" border style="width: 100%">
          <el-table-column prop="id" label="序" width="100" />
          <el-table-column prop="process" label="审核流程" width="150" />
          <el-table-column prop="people" label="处理人" width="150" />
          <el-table-column prop="result" label="处理结果" width="150" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="time" label="处理时间" width="180" />
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="edit">重新编辑</el-button>
          <el-button type="primary" @click="insure">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { useInventoryStore } from "../../../stores/InventoryVM";
const flag = ref(false);

const InventoryStore = useInventoryStore();

if (InventoryStore.IsCover.BsAudit) {
  flag.value = true;
}
defineProps({
  title: {
    type: String,
    default: "商品报损"
  }
});
// 申请历史和报损历史，格式一样暂时用一个数据
const ReportingHistoryData = [
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核中",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核中",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核通过",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核拒绝",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核中",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  },

  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核拒绝",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核拒绝",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "审核拒绝",
      look: "查看"
    }
  },
  {
    serialNumber: "BD567890H345678",
    serialTime: "2022-12-9",
    number: 11,
    state: {
      state: "编辑中",
      look: "编辑"
    }
  }
];

const AllInfo = ref({
  audit: {
    title: "审核流程",
    info: [
      {
        id: 1,
        process: "申请提交",
        people: "TC-ZY",
        result: "提交",
        remark: "请审核",
        time: "2019-12-30 12:09:23"
      },
      {
        id: 2,
        process: "申请初审",
        people: "等等饿",
        result: "审核通过",
        remark: "请审核",
        time: "2019-12-30 12:09:23"
      },
      {
        id: 3,
        process: "申请终审",
        people: "更是与",
        result: "审核拒绝",
        remark: "损坏图片不清晰，请重传",
        time: "2019-12-30 12:09:23"
      }
    ]
  }
});
function edit() {
  InventoryStore.changeBoolean("BsEditing");
}
function insure() {
  InventoryStore.changeBoolean("InfoTable");
}
</script>
  
  <style scoped>
dialog {
  line-height: 80px;
}
.info {
  margin-bottom: 10px;
}
.info > p:nth-child(1) {
  font-weight: bold;
  color: #32325d;
  font-size: 18px;
  margin-bottom: 10px;
}
.goodsInfo {
  border-top: 1px solid #ccc;
  padding-top: 10px;
}
.info > p:not(:nth-child(1)) {
  text-indent: 30px;
}
.info > p:nth-child(2) > span:nth-child(1) {
  margin-right: 50px;
}
.info > p:nth-child(3) {
  line-height: 50px;
}
.info > p:nth-child(3) > span {
  margin-right: 50px;
}
.ReportingImg {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.pic {
  display: flex;
  margin-top: 10px;
  margin-left: 30px;
}
</style>